<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><a href="#/">aaa</a></li>
        <li><a href="#/blue">bbb</a></li>
        <li><a href="#/green">ccc</a></li>
    </ul>
    <script>
    /*
 * @Author: Abner.gqojuqiang 
 * @Date: 2017-12-01 08:55:50 
 * @Last Modified by: Abner.gaojuqiang
 * @Last Modified time: 2017-12-01 10:13:10
 */
/**
 * # 代表网页中的一个位置，其右边的字符，就是该位置的标识符
 * 为网指定标识符有两个方法，1 使用锚点 2 使用id属性
 * # 是知道浏览器动作的，对服务器没有作用，如果想要发送#到服务端必须进行转码%23
 * 改变#后面的部分网页不会重载，但是会在浏览器的访问历史中增加一个记录，使用“后退”
 * 按钮时，就可以回到上一个位置
 * window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变
 * 写入时，则会在不重载网页的前提下，创造一条访问的历史记录
 * onhashchange 是html5新增的一个属性，当#值发生变化时，就会触发这个事件
 * 
 */
function Router(){
        this.routes = {};
        this.currrntUrl = "";
    }  
    Router.prototype.route = function(path,callback){
        this.routes[path] = callback || function(){};
    }
    Router.prototype.refresh = function(){
        this.currrntUrl = location.hash.slice(1) || '/';
        this.routes[this.currrntUrl]();
    }
    Router.prototype.init = function(){
        //初始化为load和hashchange添加监听事件
        window.addEventListener('load',this.refresh.bind(this),false);
        window.addEventListener('hashchange',this.refresh.bind(this),false);
    }
    window.Router = new Router();
    window.Router.init();
    var content = document.querySelector("body");
    function changeColor(color){
        content.style.backgroundColor = color
    }
    Router.route('/',function(){
        changeColor('white');
    });
    Router.route('/blue',function(){
        changeColor("blue");
    });
    Router.route('/green',function(){
        changeColor('green');
    })
    </script>
</body>
</html>